import 'package:flutter/material.dart';

class ForgetPwd extends StatefulWidget {
  const ForgetPwd({super.key});
  @override
  State<StatefulWidget> createState() {
    return ForgetPwdState();
  }
}

class ForgetPwdState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      decoration: const BoxDecoration(color: Colors.brown),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: 40,
              margin: const EdgeInsets.symmetric(vertical: 5),
              decoration: BoxDecoration(
                  color: Colors.grey,
                  border: Border.all(
                      color: Colors.grey, width: 1, style: BorderStyle.solid)),
              child: Row(children: const [
                SizedBox(
                  width: 100,
                  child: Text(
                    "Username:",
                    style: TextStyle(fontSize: 17),
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "Please input your username"),
                  ),
                )
              ]),
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: 40,
              margin: const EdgeInsets.symmetric(vertical: 5),
              decoration: BoxDecoration(
                  color: Colors.grey,
                  border: Border.all(
                      color: Colors.grey, width: 1, style: BorderStyle.solid)),
              child: Row(children: const [
                SizedBox(
                  width: 100,
                  child: Text(
                    "Tel:",
                    style: TextStyle(
                      fontSize: 17,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "Please input your tel number",
                        hintStyle: TextStyle(color: Colors.black)),
                  ),
                )
              ]),
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.85,
              height: 40,
              margin: const EdgeInsets.symmetric(vertical: 5),
              decoration: BoxDecoration(
                  color: Colors.grey,
                  border: Border.all(
                      color: Colors.grey, width: 1, style: BorderStyle.solid)),
              child: Row(children: const [
                SizedBox(
                  width: 100,
                  child: Text(
                    "Valid Code:",
                    style: TextStyle(
                      fontSize: 17,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "Please input your valid code here",
                        hintStyle: TextStyle(color: Colors.black)),
                  ),
                )
              ]),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: TextButton(
                style: ButtonStyle(
                  fixedSize: MaterialStateProperty.resolveWith(
                      (states) => const Size(150, 30)),
                  backgroundColor: MaterialStateProperty.resolveWith(
                      (states) => Colors.blue),
                ),
                child: const Text(
                  "Reset",
                  style: TextStyle(color: Colors.black),
                ),
                onPressed: () {},
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: TextButton(
                style: ButtonStyle(
                  fixedSize: MaterialStateProperty.resolveWith(
                      (states) => const Size(150, 30)),
                  backgroundColor: MaterialStateProperty.resolveWith(
                      (states) => Colors.blue),
                ),
                child: const Text(
                  "Go back",
                  style: TextStyle(color: Colors.black),
                ),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ),
          ],
        ),
      ),
    ));
  }
}
